App.module.Setting = Ext.extend(App.Module, {
	name: 'Settings'
	,init: function(){
		App.StartMenu.setting.setIconClass(this.id + '-16x16');
		App.StartMenu.setting.on('click', function(bt){
			this.showWin(bt.id);
		}, this);
	}
	,getItems: function(){
		return [
			
		];
	}
	,getItems: function(){
		if(this.items) return this.items;
		
		// fieldset role & user
		var store = new Ext.data.ArrayStore({
			proxy   : new Ext.data.MemoryProxy(),
			fields  : ['id', 'name', 'icon'],
			sortInfo: {
				field    : 'name',
				direction: 'ASC'
			}
		});
		store.loadData([
			['role', 'Roles', 'role-48x48.png']
			,['user', 'Users', 'user-48x48.png']
		]);
		
		var fieldset = new Ext.form.FieldSet({
			title: 'Roles & Users'
			,items: new Ext.DataView({
				store: store
				,tpl  : new Ext.XTemplate(
					'<ul>',
						'<tpl for="." class="icon">',
							'<li id="setting-icon-{id}" class="icon">',
								'<img src="images/icons/{icon}" />',
								'<strong>{name}</strong>',
							'</li>',
						'</tpl>',
					'</ul>'
				)
				,itemSelector: 'li.icon'
				,listeners: {
					dblclick: function(dataView, index, node, e){
						App.Module[dataView.getRecord(node).data.id].showWin(node);	
					}	
				}
			})
		});
		
		this.items = [fieldset];
		return this.items;
	}
	,getWin: function(){
		if(!this.win){
			var items = this.getItems();
			this.win = new App.Window({
				id: this.id
				,title: this.name
				,iconCls: this.id + '-16x16'
				,items: items
				,bodyStyle: 'padding:10px;'
			});
		}
		return this.win;
	}
	,showWin: function(id){
		this.getWin().show(id);	
	}
});